<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-12 ">
                <form id="post-form">
                    <div class="select-list">
                        <ul>

                            <li class="select-time">
                                <label>时间： </label>
                                <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                                <span>-</span>
                                <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="getData()"><i class="fa fa-search"></i>&nbsp;查询</a>
                                <!--                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->

                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>时段客群消费</h5>
                </div>
                <div class="ibox-content">
                    <div style="height: 380px" id="echarts-age-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>时段性别消费</h5>
                </div>
                <div class="ibox-content">
                    <div style="height: 380px" id="echarts-gender-chart"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">

        <div class="col-sm-12" >
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>客群画像</h5>

                </div>

                <div class="ibox-content">

                    <!--                            <div  style="height:280px" id="echarts-bar-chart"></div>-->

                    <div class="echarts" id="media-age-gender">
                        <!-- 2行4列 -->
                        <div class="col-sm-7"  style="margin-top: 30px">
                            <div class="row">
                                <!--                                    <div class="col-sm-3">
                                                                        <div class="media">
                                                                            <div class="media-left">
                                                                                <img src="/img/shaonian.png" class="media-object" style="width:60px">
                                                                            </div>
                                                                            <div class="media-body">
                                                                                <h4 class="media-heading">少年</h4>
                                                                                <p>人数：<span  id="m01"></span></p>
                                                                            </div>
                                                                        </div>
                                                                    </div>-->
                                <div class="col-sm-4">
                                    <div class="media" align="middle">
                                        <div class="media-middle">
                                            <img  th:src="@{/img/qingnian.png}" class="media-object" style="width:80px">
                                        </div>
                                        <div class="media-body" align="center">
                                            <!--                                                <h4 class="media-heading">青年 <h4 id="m02"></h4></h4>-->
                                            <p style="font-size: 18px;color: #002a80"><span id="m02"></span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="media" align="middle">
                                        <div class="media-middle">
                                            <img th:src="@{/img/zhongnian.png}" class="media-object" style="width:80px">
                                        </div>
                                        <div class="media-body" align="center">
                                            <!--                                                <h4 class="media-heading">中年</h4>-->
                                            <p style="font-size: 18px;color: #002a80"><span id="m03" ></span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="media" align="middle">
                                        <div class="media-middle">
                                            <img th:src="@{/img/laonian.png}" class="media-object" style="width:80px">
                                        </div>
                                        <div class="media-body" align="center">
                                            <!--                                                <h4 class="media-heading">老年</h4>-->
                                            <p style="font-size: 18px;color: #002a80"><span  id="m04"></span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <!--                                    <div class="col-sm-3">
                                                                        <div class="media">
                                                                            <div class="media-left">
                                                                                <img src="/img/shaonv.png" class="media-object" style="width:60px">
                                                                            </div>
                                                                            <div class="media-body">
                                                                                <h4 class="media-heading">少女</h4>
                                                                                <p>人数：<span id="f01"></span></p>
                                                                            </div>
                                                                        </div>
                                                                    </div>-->
                                <div class="col-sm-4">
                                    <div class="media" align="middle">
                                        <div class="media-middle">
                                            <img th:src="@{/img/nvqingnian.png}" class="media-object" style="width:80px">
                                        </div>
                                        <div class="media-body" align="center">
                                            <!--                                                <h4 class="media-heading">青年</h4>-->
                                            <p style="font-size: 18px;color: #002a80"><span id="f02"></span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="media" align="middle">
                                        <div class="media-middle">
                                            <img th:src="@{/img/nvzhongnian.png}" class="media-object" style="width:80px">
                                        </div>
                                        <div class="media-body" align="center">
                                            <!--                                                <h4 class="media-heading">中年</h4>-->
                                            <p style="font-size: 18px;color: #002a80"><span id="f03"></span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="media" align="middle">
                                        <div class="media-middle" >
                                            <!--                                                <img src="/img/laoniannv.png" class="media-object" style="width:80px">-->
                                            <img th:src="@{/img/laoniannv.png}" class="media-object" style="width:80px">
                                        </div>
                                        <div class="media-body " align="center"  >
                                            <!--                                                <h4 class="media-heading">老年</h4>-->
<!--                                            <p style="font-size: 18px; color: #002a80"><span id="f04"></span></p>-->
                                            <span id="f04"  style="font-size: 18px; color: #002a80"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-5" style="margin-bottom: 5px">
                            <!--                        <div class="ibox-content">-->
                            <div style="height: 240px" id="echarts-pie-chart"></div>
                            <!--                        </div>-->
                        </div>
                    </div>
                </div>


            </div>

        </div>

    </div>




</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-css" />
<th:block th:include="include :: datetimepicker-js" />



<!--<th:block th:include="include :: echarts-js" />-->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>

<script th:inline="javascript">
    $("#startTime").datetimepicker({
        format:'yyyy-mm-dd',
        autoclose:true,//自动关闭
        minView:2,//最精准的时间选择为日期0-分 1-时 2-日 3-月
        weekStart:0,
        initialDate: new Date()

    });
    $("#startTime").datetimepicker("setDate", new Date());
    $("#endTime").datetimepicker({
        format:'yyyy-mm-dd',
        autoclose:true,//自动关闭
        minView:2,//最精准的时间选择为日期0-分 1-时 2-日 3-月
        weekStart:0,
        initialDate: new Date()

    });
    $("#endTime").datetimepicker("setDate", new Date());

    $(document).ready(getData());
    // $(function () {


    /*    var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var baroption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['男', '女']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'value'
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    // data: ['0~6', '7~12', '13~18', '19~28', '29~35', '36~45', '46~55','56及以上']
                    data: ['13~18', '19~28', '29~35', '36~45', '46~55','56及以上']
                }
            ],
            series: [
                {
                    name: '男',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                },
            ]
        };
        barChart.setOption(baroption);

        window.onresize = barChart.resize;*/

    var ageChart = echarts.init(document.getElementById("echarts-age-chart"))
    var ageoption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['13~28岁（青年）', '29~55岁（中年）','56岁及以上（老年）']
        },
        toolbox: {
            // feature: {
            //     saveAsImage: {}
            // }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                name: '时',
                type: 'category',
                boundaryGap: false,
                // data: ['0', '1', '2', '3', '4', '5', '6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
                data: ['6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22']
            }
        ],
        yAxis: [
            {
                name: '元',
                type: 'value'
            }
        ],
        series: [
            {
                name: '13~28岁（青年）',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '29~55岁（中年）',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '56岁及以上（老年）',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };
    ageChart.setOption(ageoption);
    window.onresize = ageChart.resize;





    var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
    var pieoption = {
        title : {
            // text: '某站点用户访问来源',
            //   subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b}   {c} ({d}%)"
        },
        // legend: {
        //     orient : 'vertical',
        //     x : 'left',
        //     data:['男','女','未知']
        // },
        calculable : true,
        series : [
            {
                name:'客流数',
                type:'pie',
                radius : '55%',
                center: ['50%', '50%'],
                data:[

                ]
            }
        ]
    };
    pieChart.setOption(pieoption);
    $(window).resize(pieChart.resize);

    $(document).ready(getData());
    // $(function () {
    var genderChart = echarts.init(document.getElementById("echarts-gender-chart"));
    var genderOption = {
        /*        title: {
                    text: '堆叠区域图'
                },*/
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['男性', '女性']
        },
        toolbox: {
            // feature: {
            //     saveAsImage: {}
            // }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                name: '时',
                type: 'category',
                boundaryGap: false,
                // data: ['0', '1', '2', '3', '4', '5', '6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
                data: ['6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22']
            }
        ],
        yAxis: [
            {
                name: '元',
                type: 'value'
            }
        ],
        series: [
            {
                name: '男性',
                // type: 'line',
                type: 'bar',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '女性',
                //   type: 'line',
                type: 'bar',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: []
            }
        ]
    };
    genderChart.setOption(genderOption);
    $(window).resize(genderChart.resize);


    function getData() {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        console.log("查询条件： " )

        var ctx = /*[[@{/}]]*/'/'  ;

        console.log("ctx:" + ctx)
        // 24小时分段客流

        // 男女分类客流
        $.ajax({
            type: 'POST',
            url: ctx + 'baodao/statement/queryGenderCount',
            data: {startTime: startTime,endTime: endTime},
            success: function (result) {
                console.log(result)
                //填充数据
                var data = [];
                $.each(result.data,function (index,item) {
                    let name ;
                    if (item.gender == '1')
                    {name =  '男性';}
                    else if(item.gender == '2')
                    {name = '女性';}
                    else
                    {  name = '未知';}
                    var row = {
                        value: item.count,
                        name: name
                    };
                    data.push(row)

                })
                console.log(data)
                /*                data.push('value:' + 100,'name:男')
                                data.push('value:' + 200,'女' )*/
                pieChart.setOption({
                    series : [
                        {
                            name:'客流数',
                            type:'pie',
                            radius : '76%',
                            center: ['50%', '55%'],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal:{
                                    label:{
                                        show: true,
                                        formatter: "{b} \n \n {c} ({d}%)"

                                    },
                                    labelLine :{show:true}
                                }
                            },
                            data:data
                        }
                    ]
                })
            },
            dataType: 'json'
        });
        // 年龄段分类消费
        // 24小时销售 年龄段
        $.ajax({
            type: 'POST',
            url: ctx +  'baodao/statement/queryAmountCountByAge',
            data: {startTime: startTime,endTime: endTime},
            success: function (result) {
                console.log(result)
                let data1 = [] ; //
                let data2 = [] ; //
                let data3 = [] ; //
                let data4 = [] ; //
                let data5 = [] ; //
                let data6 = [] ; //
                let data7 = [] ; //
                let data8 = [] ; //


                for( var i in result.data.one){
                    console.log("字符串转浮点数： "  )
                    console.log(result.data.one[i])
                    let tmp = parseFloat(result.data.one[i]);
                    data1.push(tmp)
                }

                for( var i in result.data.two){
                    data2.push(parseFloat(result.data.two[i]))
                }

                for( var i in result.data.three){
                    data3.push(parseFloat(result.data.three[i]))
                }

                for( var i in result.data.four){
                    data4.push(parseFloat(result.data.four[i]))
                }

                for( var i in result.data.five){
                    data5.push(parseFloat(result.data.five[i]))
                }

                for( var i in result.data.six){
                    data6.push(parseFloat(result.data.six[i]))
                }
                for( var i in result.data.seven){
                    data7.push(parseFloat(result.data.seven[i]))
                }
                for( var i in result.data.eight){
                    data8.push(parseFloat(result.data.eight[i]))
                }

                console.log("测试数据： data5 : " + data5.toString());
                console.log("测试数据： data6 : " + data6);
                console.log("测试数据： data7 : " + data7);
                console.log("测试数据： data8 : " + data8);

                let newData1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
                let newData2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
                let newData3 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
                // 数组 对应项 相加
                let json1 = {data2,data3};
                for(let key in json1){
                    json1[key].forEach((value,index) => {
                        console.log("测试数据1:  " + value);
                        // newData1[index] += value;

                        //
                        newData1[index] = addNum(newData1[index],value)
                        console.log("")
                    })
                }

                let json2 = {data3,data4,data5};
                for(let key in json2){
                    json2[key].forEach((value,index) => {
                        console.log("测试数据2 index:  " + index);
                        console.log("测试数据2 value:  " + value);
                        console.log("测试数据2 value 数据类型:  " + typeof value);
                        //newData2[index] += value;
                        newData2[index] = addNum(newData2[index],value)
                        //   newData2[index] = addNum(newData2[index],value)
                        console.log("newdata1 :  " + newData2[index]);
                        console.log("newdata1 shshu :  " + typeof  newData2[index]);
                    })
                }

                let json3 = {data6,data7};
                for(let key in json3){
                    json3[key].forEach((value,index) => {
                        console.log("测试数据3:  " + value);
                        //newData3[index] += value;
                        newData3[index] = addNum(newData3[index],value)
                    })
                }



                console.log("新数据1：" + newData1.toString())
                console.log("新数据2：" + newData2.toString())
                console.log("新数据3：" + newData3.toString())

                // 填充数据
                ageChart.setOption({
                    /*series: [
                        {
                            name: '0~6岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data1
                        },
                        {
                            name: '7~12岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data2
                        },
                        {
                            name: '13~18岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data3
                        },
                        {
                            name: '19~28岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data4
                        },
                        {
                            name: '29~35岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data5
                        },
                        {
                            name: '36~45岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data6
                        },{
                            name: '46~55岁',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data7
                        },
                        {
                            name: '56岁以上',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data8
                        }
                    ]*/

                    series: [
                        {
                            name: '13~28岁（青年）',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: newData1.slice(6,23)
                        },
                        {
                            name: '29~55岁（中年）',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: newData2.slice(6,23)
                        },
                        {
                            name: '56岁及以上（老年）',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: newData3.slice(6,23)
                        }
                    ]

                })

            },
            dataType: 'json'
        });

        // 年龄段分类客流
        $.ajax({
            type: 'POST',
            url: ctx + 'baodao/statement/queryAgeCount',
            data: {startTime: startTime,endTime: endTime},
            success: function (result) {
                console.log(result)
                //  var data1 = [0,0,0,0,0,0,0,0]; // 男性
                var data1 = ['0','0','0','0','0','0','0','0']; // 男性
                //  var data1 = ['0','0','0','0','0','0']; // 男性
                // var data2 = [0,0,0,0,0,0,0,0]; //女性
                var data2 = ['0','0','0','0','0','0','0','0']; //女性
                // var data2 = ['0','0','0','0','0','0']; //女性
                $.each(result.data,function (index,item) {
                    console.log(item.ageRange + ' ' + item.gender + ' ' + item.count);

                    if(item.gender == 1){
                        console.log()
                        data1[item.ageRange - 1]= item.count;
                    }
                    if(item.gender == 2){
                        data2[item.ageRange - 1] = item.count;
                    }


                })

                // 去除 0-12 岁 数据
                // data1.

                // 图标4 数据 20210222
                /*  console.log("m01 " +  $("#m01").innerHTML )
                  console.log(  $("#m01").innerHTML )
                  console.log(  data1[0]  )
                  console.log(  data1[1] )
                  console.log(  data1[0] + data1[1] )*/
                /*   $("#m01").innerHTML += data1[0] + data1[1];*/
                console.log("m01 " +  $("#m01").innerHTML )

                //   $("#m02").innerHTML += data1[2] + data1[3];
                //  $("#m01").append(parseInt(data1[0],10) + parseInt(data1[1],10))
/*                $("#m01").text(parseInt(data1[0],10) + parseInt(data1[1],10))
                $("#m02").text(parseInt(data1[2],10) + parseInt(data1[3],10))
                $("#m03").text(parseInt(data1[4],10) + parseInt(data1[5],10))
                $("#m04").text(parseInt(data1[6],10) + parseInt(data1[7],10))


                $("#f01").text(parseInt(data2[0],10) + parseInt(data2[1],10))
                $("#f02").text(parseInt(data2[2],10) + parseInt(data2[3],10))
                $("#f03").text(parseInt(data2[4],10) + parseInt(data2[5],10))
                $("#f04").text(parseInt(data2[6],10) + parseInt(data2[7],10))*/

                $("#m01").text(parseInt(data1[0],10) + parseInt(data1[1],10))
                $("#m02").text(parseInt(data1[2],10) + parseInt(data1[3],10))
                $("#m03").text(parseInt(data1[4],10) + parseInt(data1[5],10) + parseInt(data1[6],10))
                $("#m04").text(parseInt(data1[7],10))


                $("#f01").text(parseInt(data2[0],10) + parseInt(data2[1],10))
                $("#f02").text(parseInt(data2[2],10) + parseInt(data2[3],10))
                $("#f03").text(parseInt(data2[4],10) + parseInt(data2[5],10) + parseInt(data2[6],10))
                $("#f04").text( parseInt(data2[7],10))


                /*  $("#m03").innerHTML += data1[4] + data1[5];
                  $("#m04").innerHTML += data1[6] + data1[7];
  */
                // $("#f01").innerHTML += data2[0] + data2[1];
                // $("#f02").innerHTML += data2[2] + data2[3];
                // $("#f03").innerHTML += data2[4] + data2[5];
                // $("#f04").innerHTML += data2[6] + data2[7];


                console.log('data1' + data1);
                console.log('data2' + data2);


                /*   barChart.setOption({
                       series: [
                           {
                               name: '男',
                               type: 'bar',
                               label: {
                                   show: true,
                                   position: 'inside'
                               },
                               emphasis: {
                                   focus: 'series'
                               },
                               data: data1.slice(2,7)
                           },
                           {
                               name: '女',
                               type: 'bar',
                               // stack: '总量',
                               label: {
                                   show: true
                               },
                               emphasis: {
                                   focus: 'series'
                               },
                               data: data2.slice(2,7)
                           },
                       ]
                   })*/

            },
            dataType: 'json'
        });

        // 24小时销售 性别
        $.ajax({
            type: 'POST',
            url: ctx +  'baodao/statement/queryAmountCountByGender',
            data: {startTime: startTime,endTime: endTime},
            success: function (result) {
                console.log(result)
                let data1 = [] ; // 男
                let data2 = [] ; // 女
                for( var i in result.data.male){
                    data1.push(result.data.male[i])
                }

                for( var i in result.data.female){
                    data2.push(result.data.female[i])
                }



                console.log("男：" + data1)
                console.log("女：" + data2)

                // 去除前6条数据，显示6点至22点数据
                //  data1.slice(5,22)
                //   data2.slice(5,22)

                // 填充数据
                genderChart.setOption({
                    series: [
                        {
                            name: '男性',
                            // type: 'line',
                            type: 'bar',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data1.slice(6,23)
                        },
                        {
                            name: '女性',
                            //   type: 'line',
                            type: 'bar',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: data2.slice(6,23)
                        }
                    ]
                })

            },
            dataType: 'json'
        });


    }
</script>
<script>
    // 浮点数 相加
    function addNum (num1, num2) {
        var sq1,sq2,m;
        try {
            sq1 = num1.toString().split(".")[1].length;
        }
        catch (e) {
            sq1 = 0;
        }
        try {
            sq2 = num2.toString().split(".")[1].length;
        }
        catch (e) {
            sq2 = 0;
        }
        m = Math.pow(10,Math.max(sq1, sq2));
        let result =   (num1 * m + num2 * m) / m;
        return result.toFixed(2);
    }
    // alert(addNum(0.1, 0.2));
</script>
</body>
</html>